<template>
  <van-tab title="目录">
    <van-collapse v-model="activeNames" :border="false">
      <van-collapse-item v-for="item in chapters" :key="item.id" :name="item.index" :border="false" center>
        <template #title>
          <div class="chapter-name">{{item.title}}</div>
        </template>
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
        <div class="chapter-video">
          <div class="video-item" v-for="sub in videos[item.id]" :key="sub.id" @click="goStudy(sub.id)">
            <div class="video-title">
              <i>试看</i>
              <span :class="{playing: $route.name == 'video' && $route.query.id == sub.id}">{{sub.title}}</span>
            </div>
            <img src="@/assets/images/play.gif" alt="" v-if="$route.name == 'video' && $route.query.id == sub.id">
            <time v-else>{{Math.floor(sub.duration/60).toString().padStart(2,'0') + ':' + (sub.duration%60).toString().padStart(2,'0')}}</time>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
  </van-tab>
</template>

<script>
export default {
  props: ['chapters', 'videos'],
  data() {
    return {
      activeNames: [],
    };
  },
  methods: {
    goStudy(id) {
      this.$router.push({
        path: '/vod/video',
        query: {
          id: id || this.videos[this.chapters[0].id][0].id,
        },
      }).catch((err) => {});
    },
  },
  created() {
    if (this.$route.name == 'video') {
      for (const i in this.chapters) {
        for (const j in this.videos[this.chapters[i].id]) {
          if (this.$route.query.id == this.videos[this.chapters[i].id][j].id) {
            this.activeNames.push(+i);
            break;
          }
        }
      }
    } else {
      for (const i in this.chapters) {
        this.activeNames.push(+i);
      }
    }
  },
};
</script>

<style lang="less" scoped>
.chapter-name {
  font-size: 15.2px;
  font-weight: 700;
}
.video-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: #f6f6f6;
  height: 36px;
  padding: 0 8px;
  margin: 8px 0;
  border-radius: 4px;
  align-items: center;
  i {
    padding: 2px 4px;
    background-color: #04c877;
    border-radius: 2px;
    font-size: 12px;
    margin-right: 8px;
    color: #fff;
  }
  span {
    color: #333;
    &.playing {
      color: #3ca7fa;
    }
  }
  img {
    position: absolute;
    top: 0;
    right: 8px;
    width: 24px;
  }
  time {
    color: #999;
    font-size: 12px;
  }
}
</style>
